import {Card, Pagination, Table} from "antd";
import styles from "../styles.less";
import {useCallback, useEffect, useState} from "react";
import {connect} from 'umi';

const DataTable = (props) => {

  const [tablePayload, setTablePayload] = useState({page: 1, size: 15, param: {status: -1}});
  const {dispatch, dataTable, loading} = props;

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    console.log(payload)
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList(tablePayload);
  }, [fetchList, tablePayload]);

  function onSelect(e, status) {
    e.preventDefault();
    setTablePayload({page: 1, size: 15, param: {status}})
    return false;
  }

  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center',
      fixed: 'left',
      render: ({}, {}, index) => (
        <span>
          {(tablePayload.page - 1) * tablePayload.size + index + 1}
        </span>
      ),
    },
    {
      title: '数列名称',
      dataIndex: 'col0',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '数列名称',
      dataIndex: 'col1',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '数列名称',
      dataIndex: 'col2',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '数列名称',
      dataIndex: 'col3',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '数列名称',
      dataIndex: 'col4',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '数列名称',
      dataIndex: 'col5',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '数列名称',
      dataIndex: 'col6',
      align: 'center',
      ellipsis: true,
    },
  ];

  return (
    <Card
      title={"数据动态"} bordered={false}
      styles={{body: {padding: 0}}}
      size={"small"}
      extra={<div className={styles.cardExtraWrap}>
        <div className={styles.cardExtra}>
          <a className={tablePayload.param.status === -1 ? styles.currentDate : ''}
             onClick={e => onSelect(e, -1)}>全部</a>
          <a className={tablePayload.param.status === 0 ? styles.currentDate : ''}
             onClick={e => onSelect(e, 0)}>待处理</a>
          <a className={tablePayload.param.status === 1 ? styles.currentDate : ''}
             onClick={e => onSelect(e, 1)}>已处理</a>
        </div>
      </div>}>
      <div className={styles.myTabContainer}>
        <div className={styles.myDataTable}>
          <Table
            loading={loading} className={styles.myTable} bordered={false} size={'small'} columns={columns}
            dataSource={dataTable.list} rowKey={'id'}
            pagination={false} scroll={{y: '100%'}}
          />
        </div>
        <Pagination
          pageSize={tablePayload.size} current={tablePayload.page} total={dataTable.total}
          className={styles.myPagination} size={'small'} hideOnSinglePage={false}
          pageSizeOptions={[15, 30, 60, 120]}
          showSizeChanger showQuickJumper={true}
          onChange={(page, pageSize) => {
            setTablePayload({...tablePayload, page: page, size: pageSize});
          }}
          showTotal={(total) => {
            return `共 ${total} 条记录`;
          }}
        />
      </div>
    </Card>
  );
}

export default connect(({}) => {
  let list = [];
  for (let i = 0; i < 15; i++) {
    list.push({
      id: i,
      col0: `数据值${i + 1}`,
      col1: `数据值${i + 1}`,
      col2: `数据值${i + 1}`,
      col3: `数据值${i + 1}`,
      col4: `数据值${i + 1}`,
      col5: `数据值${i + 1}`,
      col6: `数据值${i + 1}`,
    });
  }
  return {
    loading: false,
    dataTable: {
      total: 15,
      list
    },
  };
})(DataTable);
